<template>
    <el-form ref="form" :model="form"  :rules="formRules"  label-width="100px"  style="margin:20px;width:60%;min-width:600px;">
        <el-form-item label="名称" prop="cultureName">
            <el-input v-model="form.cultureName"  style="width: 50%;"  placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="cultureAddress">
            <el-input v-model="form.cultureAddress"  style="width: 50%;" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="cultrueDate">
            <el-col >
                <el-date-picker type="date" placeholder="请选择日期" v-model="form.cultrueDate" style="width: 50%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="是否置顶热门">
            <!--<el-input v-model="form.cultrueHot"  style="width: 50%;"  placeholder="请输入名称"></el-input>-->
            <el-radio-group v-model="form.cultrueHot">
                <el-radio :label=" '0'">否</el-radio>
                <el-radio :label="'1'">是</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="简介" prop="cultureSummary">
            <el-input type="textarea" v-model="form.cultureSummary" :rows="4"  placeholder="请输入简介"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="cultrueVideo">
            <el-upload
                    class="avatar-uploader"
                    action="api/upload/img"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="cultrueVideo" :src="cultrueVideo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip" style="text-align: center;width: 300px">只能上传jpg文件，且不超过2M</div>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">发布</el-button>
            <el-button @click.native.prevent>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import  util from '../../common/js/util'
    import  axios from 'axios'
    import {  postNewsAdd,putUpdateCultrue} from '../../api/api';
    export default {
        data() {
            return {
                form: {
                    cultureName:'',
                    cultrueDate:util.getCurrentTime(''),
                    cultureSummary:'',
                    cultureAddress:'',
                    cultrueLikes:0,
                    cultrueVideo:'',
                    cultrueDelete:0,
                    cultrueHot:'0'
                },
                cultrueVideo:'',
                formRules: {
                    cultureName: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    cultureSummary: [
                        { required: true, message: '请输入简介', trigger: 'blur' }
                    ],
                    cultureAddress: [
                        { required: true, message: '请输入地址', trigger: 'blur' }
                    ],
                    cultrueVideo: [
                        { required: true, message: '请上传图片', trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            //提交
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认发布吗？', '提示', {}).then(() => {
                            let para = Object.assign({}, this.form);
                            para.cultrueDate= util.getCurrentTime(para.cultrueDate);
                            para.cultrueHot = Number(para.cultrueHot);
                            console.log(para);
                            putUpdateCultrue(para).then((res) => {
                                util.getMessage(res,this,"发布成功");
                                this.$refs['form'].resetFields();
                            });
                        });
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                let param = new FormData();
                param.append('img', file.raw);
                let config = {
                    headers: { 'Content-Type': 'multipart/form-data' }
                };
                axios.post("/api/upload/img",param,config).then(res => {
                    console.log(res);
                    this.form.cultrueVideo = 'api/'+res.data.body;
                    this.cultrueVideo =  this.form.cultrueVideo
                    console.log(this.form.cultrueVideo);
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }

    }

</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 300px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 178px;
        display: block;
    }
</style>